<template>
  <div style="width: 909px; height: 583px" class="map">
    <img src="../../../public/imgs/lbx.png" alt="" srcset="" class="map1" />
    <img src="../../../public/imgs/jt.png" alt="" srcset="" class="map2" />
    <div id="mapContainer" ref="huojiaMap"></div>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import huojiaMapData from "../../assets/河南_郑州市_管城回族区.json";
  import imageUrl8 from "../../../public/imgs/bbb.png";

  export default {
    name: "MapChart",
    data() {
      return {
        geoCoordMap: {
          // 北下街街道: [113.669857, 34.752311],
          西大街街道: [113.673244, 34.750042],
          // 南关街街道: [113.675431, 34.742435],
          // 城东路街道: [113.690797, 34.737323],
          // 东大街街道: [113.686101, 34.748344],
          二里岗街道: [113.697318, 34.737662],
          陇海马路街道: [113.702479, 34.722617],
          // 紫荆山南路街道: [113.686026, 34.71809],
          // 航海东路街道: [113.69883, 34.719045],
          十八里河街道: [113.690287, 34.675729],
          南曹街道: [113.740242, 34.664769],
          商都路街道: [113.770474, 34.755777],
          圃田乡: [113.82121083114767, 34.74840013868685],
        },
        customerBatteryCityData: [
          // { name: "北下街街道", value: 13, over:10 , Nover: 3, },
          { name: "西大街街道", value: 17, over: 16, Nover: 1 },
          // { name: "南关街街道", value: 1 , over: 1, Nover: 0,},
          // { name: "城东路街道", value: 7 , over: 7, Nover:0 ,},
          // { name: "东大街街道", value: 6 , over: 6, Nover:1 ,},
          { name: "二里岗街道", value: 11, over: 10, Nover: 1 },
          { name: "陇海马路街道", value: 27, over: 26, Nover: 1 },
          // { name: "紫荆山南路街道", value: 7 , over: 9, Nover: 1,},
          // { name: "航海东路街道", value: 10, over: 1, Nover: 9, },
          { name: "十八里河街道", value: 6, over: 6, Nover: 0 },
          { name: "南曹街道", value: 15, over: 14, Nover: 1 },
          { name: "商都路街道", value: 1, over: 1, Nover: 0 },
          { name: "圃田乡", value: 1, over: 1, Nover: 0 },
        ],
      };
    },
    mounted() {
      this.loadMap();
    },
    methods: {
      loadMap() {
        const chart = echarts.init(this.$refs.huojiaMap);

        echarts.registerMap("huojia", huojiaMapData);

        const option = {
          // tooltip: {
          //   show: true,
          //   trigger: "item",
          //   backgroundColor: "#0C121C",
          //   borderColor: "rgba(0, 0, 0, 0.16)",
          //   textStyle: {
          //     color: "#DADADA",
          //     fontSize: 12,
          //   },
          // },
          tooltip: {
            trigger: "item",
            triggerOn: "click",
            showDelay: 0, //浮层显示的延迟
            transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
            enterable: true,
            formatter: function (item) {
              if (item.componentSubType == "map") {
                // 详情
                return;
              }
              console.log(item);

              var tipHtml = "";
              tipHtml =
                '<div style="font-size: 16px;height: 150px;line-height: 30px;background:#000259;opacity: 0.75;border-radius: 3px;color:#fff">' +
                item.data.name +
                "&nbsp;&nbsp;&nbsp;<br />" +
                "来信数量:&nbsp;&nbsp;" +
                item.data.value +
                "件&nbsp;&nbsp;<br/>" +
                "已办结:&nbsp;&nbsp;" +
                item.data.over +
                "件&nbsp;&nbsp;<br/>" +
                "未办结:&nbsp;&nbsp;" +
                item.data.Nover +
                "件&nbsp;&nbsp;<br/>";
              return tipHtml;

              //  + '复电数&nbsp;&nbsp;' + item.data[2].fds + '&nbsp;&nbsp;'
              //  + '</span><button onclick="lookVideoGo()">查看</button></div>'
            },
            // position: [10, 10],
            backgroundColor: "rgba(0,0,0,0)",
          },
          geo: {
            map: "huojia",
            roam: false,
            label: {
              normal: {
                show: false,
                rotate: "tangential",
                textStyle: {
                  color: "#fff",
                  fontSize: 14,
                },
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(147, 235, 248, 1)",
                borderWidth: 2,
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    { offset: 1, color: "#0971b4" },
                    { offset: 0, color: "#072765" },
                  ],
                },
                shadowColor: "#0044c2",
                shadowOffsetX: 0,
                shadowOffsetY: 12,
              },
              emphasis: {
                areaColor: "#389BB7",
                borderWidth: 0,
              },
            },
            zoom: 400,
            center: [113.76980038367891, 34.69811174302614],
            // layoutCenter: ["50%", "50%"], // 地图中心点
            // layoutSize: "100%",
            // aspectScale: 1.1, // 调整地图的宽高比
          },
          series: [
            {
              geoIndex: 0,
              type: "map",
              roam: true,
              selectedMode: false,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  borderColor: "#2ab8ff",
                  borderWidth: 1.5,
                  areaColor: "#12235c",
                },
                emphasis: {
                  areaColor: "#2AB8FF",
                  borderWidth: 0,
                },
              },
              map: "huojia",
              data: this.customerBatteryCityData,
            },
            // 柱状体的主干
            {
              type: "lines",
              zlevel: 5,
              effect: {
                show: false,
                // period: 4, //箭头指向速度，值越小速度越快
                // trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                // symbol: 'arrow', //箭头图标
                // symbol: imgDatUrl,
                symbolSize: 5, // 图标大小
              },
              lineStyle: {
                width: 20, // 尾迹线条宽度
                color: "rgb(22,255,255, .3)",
                opacity: 1, // 尾迹线条透明度
                curveness: 0, // 尾迹线条曲直度
                emphasis: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(22, 255, 255, .6)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(22, 255, 255, 1)", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
              },
              selectedMode: false, //只有配置了这个选项才能有选中状态
              select: {
                lineStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        // color: 'rgba(248, 54, 0, 1)', // 0% 处的颜色
                        color: "#fff", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(250, 204, 34, 1)", // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                },
                label: {
                  position: "top",
                  show: false,
                  backgroundColor: {
                    image: imageUrl8,
                  },
                  width: 75,
                  height: 50,
                  lineHeight: 18,
                  padding: [20, 20],
                  formatter: function (params) {
                    var name = params.name;
                    var value = params.value;
                    var text = `{fname|${name}}\n{img|${value}}\n{fdata|}`;
                    return text;
                  },
                  rich: {
                    fname: {
                      color: "#E59B0A",
                      fontSize: 12,
                    },
                    fdata: {
                      color: "#FFE82A",
                      fontSize: 12,
                    },
                    img: {
                      color: "#0EB1FE",
                      fontSize: 14,
                      fontWeight: 600,

                      align: "center",
                    },
                  },
                },
              },
              emphasis: {
                label: {
                  position: "top",
                  show: false,
                  backgroundColor: {
                    image: imageUrl8,
                  },
                  width: 75,
                  height: 50,
                  lineHeight: 18,
                  padding: [20, 20, 20, 22],
                  formatter: function (params) {
                    var name = params.name;
                    var value = params.value;
                    var text = `{fname|${name}}\n{img|${value}件}`;
                    return text;
                  },
                  rich: {
                    fname: {
                      color: "#E59B0A",
                      fontSize: 12,
                    },
                    fdata: {
                      color: "#FFE82A",
                      fontSize: 12,
                    },
                    img: {
                      color: "#0EB1FE",
                      fontSize: 14,
                      fontWeight: 600,
                      align: "center",
                    },
                  },
                },
              },
              label: {
                position: "top",
                normal: {
                  backgroundColor: {
                    image: imageUrl8,
                  },
                  padding: [20, 10],
                  width: 80,
                  show: true,
                  formatter: function () {
                    // return ['{img|' + params.value + '}'];
                    return "";
                  },
                  rich: {
                    img: {
                      color: "#0EB1FE",
                      fontSize: 14,
                      fontWeight: 600,
                    },
                  },
                },
              },
              data: this.lineData(),
            },
            //   label: {
            //     show: 0,
            //     position: "end",
            //     formatter: "245",
            //   },
            //   silent: true,
            //   data: this.lineData(),
            // },
            // 柱状体的顶部
            {
              type: "scatter",
              coordinateSystem: "geo",
              geoIndex: 0,
              zlevel: 5,
              label: {
                show: true,
                formatter: function () {
                  // return `来信数量  ${params.data[2].value}`;
                  return ``;
                },
                position: "top",
              },
              symbol: "circle",
              symbolSize: [20, 10],
              itemStyle: {
                color: "rgb(22,255,255, 1)",
                opacity: 1,
              },
              silent: true,
              data: this.scatterData(),
            },
            // 柱状体的底部
            {
              type: "scatter",
              coordinateSystem: "geo",
              geoIndex: 0,
              zlevel: 4,
              label: {
                formatter: "{b}",
                position: "bottom",
                color: "#fff",
                fontSize: 12,
                distance: 10,
                show: true,
              },
              symbol: "circle",
              symbolSize: [20, 10],
              itemStyle: {
                color: "rgb(22,255,255, 1)",
                opacity: 1,
              },
              silent: true,
              data: this.scatterData2(),
            },
            // 底部外框
            {
              type: "scatter",
              coordinateSystem: "geo",
              geoIndex: 0,
              zlevel: 4,
              label: {
                show: false,
              },
              symbol: "circle",
              symbolSize: [40, 20],
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(22,255,255, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: "rgb(22,255,255, 0)", // 100% 处的颜色
                    },
                    {
                      offset: 0.751,
                      color: "rgb(22,255,255, 1)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgb(22,255,255, 1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },

                opacity: 1,
              },
              silent: true,
              data: this.scatterData2(),
            },
          ],
        };

        chart.setOption(option);
      },
      lineMaxHeight() {
        const maxValue = Math.max(
          ...this.customerBatteryCityData.map((item) => item.value)
        );
        return 0.05 / maxValue;
      },
      lineData() {
        return this.customerBatteryCityData.map((item) => {
          return {
            name: item.name,
            value: item.value,
            over: item.over,
            Nover: item.Nover,

            coords: [
              this.geoCoordMap[item.name],
              [
                this.geoCoordMap[item.name][0],
                this.geoCoordMap[item.name][1] +
                  item.value * this.lineMaxHeight(),
              ],
            ],
          };
        });
      },
      scatterData() {
        return this.customerBatteryCityData.map((item) => {
          return [
            this.geoCoordMap[item.name][0],
            this.geoCoordMap[item.name][1] + item.value * this.lineMaxHeight(),
            item,
          ];
        });
      },
      scatterData2() {
        return this.customerBatteryCityData.map((item) => ({
          name: item.name,
          value: this.geoCoordMap[item.name],
          num: item.value,
        }));
      },
    },
  };
</script>

<style scoped>
  #mapContainer {
    width: 909px;
    height: 583px;
    z-index: 11;
  }
  .map {
    position: absolute;
    z-index: 10;
    opacity: 1;
    top: 13%;
    width: 909px;
    height: 620px;
    left: 27%;
    .map1 {
      position: absolute;
      top: 0;
      left: 100px;
      width: 68%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      animation: myfirst2 15s infinite linear;
      display: flex;
    }
    .map2 {
      position: absolute;
      top: 0;
      left: 100px;
      width: 68%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 3;
      opacity: 0.2;
      animation: myfirst 10s infinite linear;
    }
  }

  @keyframes myfirst2 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

  @keyframes myfirst {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-359deg);
    }
  }
</style>
